<template>
  <div class="in-wrap">
        <header id="header">
          <section class="container">
            <h1 id="logo">
              <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2398150799,87219350&fm=26&gp=0.jpg" width="100%" height="100%" >
            </h1>
            <div class="h-r-nsl">
              <ul class="nav">
                <router-link to="/dashboard/index" tag="li" active-class="current" exact>
                  <a>首页</a>
                </router-link>
                <router-link to="/dashboard/list" tag="li" active-class="current">
                  <a>视频</a>
                </router-link>
                <router-link to="/qa" tag="li" active-class="current">
                  <a>问答</a>
                </router-link>
              </ul>
              <!-- / nav -->
              <!-- / nav -->
              <ul class="h-r-login">
                <li v-if="!loginInfo.id" id="no-login">
                  <a href="/login" title="登录">
                    <em class="icon18 login-icon">&nbsp;</em>
                    <span class="vam ml5">登录</span>
                  </a>
                  |
                  <a href="/register" title="注册">
                    <span class="vam ml5">注册</span>
                  </a>
                </li>
                <li v-if="loginInfo.id" id="is-login-one" class="mr10">
                  <a id="headerMsgCountId" href="#" title="消息">
                    <em class="icon18 news-icon">&nbsp;</em>
                  </a>
                  <q class="red-point" style="display: none">&nbsp;</q>
                </li>
                <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
                  <a :href="'/user/'+loginInfo.id" title>
                    <img
                      :src="loginInfo.avatar"
                      width="30"
                      height="30"
                      class="vam picImg"
                      alt
                    >
                    <span id="userName" class="vam disIb">{{ loginInfo.username }}</span>
                  </a>
                  <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
                </li>
                <!-- /未登录显示第1 li；登录后显示第2，3 li -->
              </ul>
              <aside class="h-r-search">
                <form action="#" method="post">
                  <label class="h-r-s-box">
                    <input type="text" placeholder="搜索视频" name="queryCourse.courseName" value>
                    <button type="submit" class="s-btn">
                      <em class="icon18">&nbsp;</em>
                    </button>
                  </label>
                </form>
              </aside>
            </div>
            <aside class="mw-nav-btn">
              <div class="mw-nav-icon"></div>
            </aside>
            <div class="clear"></div>
          </section>
        </header>
        <main class="main">
            <!--          显示标题-->
            <div style="font-size: 40px"><i class="el-icon-video-camera"/>:{{video.title}}</div>
            <vue-aliplayer-v2  :source="video.path" ref="player"  style="width: 1000px;height:500px;margin-top: 5px" />
            <p style="margin-top: 10px">
              <span style="color:skyblue"><i class="el-icon-s-comment"/>:</span>
              {{video.description}}
            </p>
        </main>
        <div class="footer">
          <el-tabs  >
            <el-tab-pane label="评论" name="first"></el-tab-pane>
          </el-tabs>
          <el-row>
            <el-col :span="20">
              <el-input v-model="comment.content" placeholder="发布评论"></el-input>
            </el-col>
            <el-col :span="3" :offset="1">
              <el-button type="primary" round @click="publishComment">发布评论</el-button>
            </el-col>
          </el-row>
          <div style="padding-top: 5px" >
            <div v-for="comment in commentList" :key="comment.id">
              <el-row>
                <el-col :span="2"  style="padding-top: 5px">
                  <el-avatar :src="comment.avatar" size="large"></el-avatar><p style="color: #00baf2">{{comment.username}}</p>
                </el-col>
                <el-col :span="22" style="padding-top: 10px">
                  <i class="el-icon-s-comment"/><span>{{comment.content}}</span>
                </el-col>
              </el-row>
              <el-divider/>
            </div>
            <div class="paging">
              <el-pagination
                :current-page="page"
                :page-size="limit"
                :total="total"
                style="padding: 30px 0; text-align: center;"
                layout="total, prev, pager, next, jumper"
                @current-change="getAllComment"
              />
            </div>
          </div>
        </div>
  </div>
</template>

<script>
  import '../../assets/css/reset.css'
  import '../../assets/css/theme.css'
  import '../../assets/css/global.css'
  import '../../assets/css/web.css'
  import '../../assets/css/base.css'
  import '../../assets/css/activity_tab.css'
  import '../../assets/css/bottom_rec.css'
  import '../../assets/css/nice_select.css'
  import '../../assets/css/order.css'
  import '../../assets/css/swiper-3.3.1.min.css'
  import "../../assets/css/pages-weixinpay.css"


  import cookie from "js-cookie";
  import video from "../../api/video";
  import comment from "../../api/comment";
  import order from "../../api/order";
  import router from "../../router";
    export default {
        name: "play",
        data(){
          return{
            comment:{
              memberId:'',
               username:'',
               avatar:'',
               content:'',
            },
            loginInfo: {
              id: '',
              avatar: '',
              mobile: '',
              username: '',
            },
            videoId:'',
            video:{
              vid:'',
              title:'',
              description:'',
              playAuth:'',
              price:'',
              cover:'',
              path:''
            },
            commentList:{},
            list:null,//查询之后接口返回集合
            page:1,//当前页
            limit:5,//每页记录数
            total:0,//总记录数
          }
        },
        created() {
          if(this.$route.params && this.$route.params.id) {
            this.videoId = this.$route.params.id
          }
          var userStr = cookie.get('userInfo')
          if (userStr) {
            this.loginInfo = JSON.parse(userStr)
            this.getVideoPlay()
            this.getAllComment(1)
          }else{
            this.$message({
              type: 'success',
              message: '您还没有登录!'
            });
            }
          this.isBuyCourse();
        },
      methods: {
        getVideoPlay() {
          video.getPlayer(this.videoId).then(res => {
            //获取视频资源
            this.video = res.data.data.videoPlayerVO
            console.log(this.video)
          })
        },
        //生成订单
         showOrder(){
             order.createOrders(this.videoId).then(res=>{
               this.$router.push({path:'/order/'+res.data.data.orderId})
           })
         },
        //查看订单是否支付
        isBuyCourse(){
            order.isBuyCourse(this.videoId,this.loginInfo.id).then(res=>{
                if(res.data.data.success==false){
                  this.$confirm('您需要购买才能观看此视频, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    this.$message({
                      type: 'success',
                      message: '进去订单页面!'
                    });
                    this.showOrder();
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '支付失败'
                    });
                    this.$router.push({path:'/dashboard/index'})
                  });

                }
            })
        },

        //退出
        logout() {
          //清空cookie值
          cookie.set('user','',{domain: 'localhost'})
          cookie.set('userInfo','',{domain: 'localhost'})
          //回到首页面
          window.location.href = "/";
        },
        getAllComment(page){
          comment.getAllComment(this.videoId,page).then(res=>{
            this.commentList=res.data.data.commentList
            this.total=res.data.data.total
            console.log(this.commentList)
          })
        },
        publishComment(){
          let userStr = cookie.get('userInfo')
          let Userinfo = JSON.parse(userStr)
          this.comment.memberId=Userinfo.id
          this.comment.avatar=Userinfo.avatar
          this.comment.username=Userinfo.username;
          comment.publishComment(this.videoId,this.comment).then(res=>{
            //提示注册成功
            this.$message({
              type: 'success',
              message: "添加信息成功"
            })
            this.comment.content=''
            this.getAllComment(1)
          })
        }
      }

    }
</script>

<style>
  .main{
    padding-left: 400px;
  }
  .footer{
    padding-left: 150px;
  }
</style>
